<template>
    <div id="main">
        <!-- 面包屑 -->
        <go-bread :beacklist="beacklist"></go-bread>
        <el-card>
            <el-button type="primary" @click="addRoleBtn">添加角色</el-button>
            <el-table :data="roleList" style="width: 100%" border>
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <div class="wrapper" v-for="(i, n) in scope.row.children" :key="i.id"
                            :class="{ bordernone: n != scope.row.children.length - 1 }">
                            <div class="box_left">
                                <el-tag type="" effect="dark" @close="closeFn(scope.row.id, i.id, scope.row)"
                                    closable>
                                    {{ i.authName }}
                                </el-tag>
                            </div>
                            <div class="box_right">
                                <div class="box_right_item" v-for="(ii, nn) in i.children" :key="ii.id">
                                    <div class="box_right_item_cont1"
                                        :class="{ bordernone: nn == i.children.length - 1 }">
                                        <el-tag type="success" effect="dark" @close="closeFn(scope.row.id, ii.id, scope.row)"
                                            closable>
                                            {{ ii.authName }}
                                        </el-tag>
                                    </div>
                                    <div class="box_right_item_cont2"
                                        :class="{ bordernone: nn == i.children.length - 1 }">
                                        <div class="box_right_item_cont2_tent" v-for="(iii, nnn) in ii.children"
                                            :key="iii.id">
                                            <el-tag type="warning" effect="dark" @close="closeFn(scope.row.id, iii.id, scope.row)"
                                                closable>
                                                {{ iii.authName }}
                                            </el-tag>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column type="index" label="#">
                </el-table-column>
                <el-table-column label="角色名称" prop="roleName">
                </el-table-column>
                <el-table-column label="角色描述" prop="roleDesc">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" size="small" icon="el-icon-edit" @click="editRoleBtn(scope.row.id)">编辑
                        </el-button>
                        <el-button type="danger" size="small" icon="el-icon-delete" @click="delRoleBtn(scope.row.id)">删除
                        </el-button>
                        <el-button type="warning" size="small" icon="el-icon-setting"
                            @click="allotQuanBtn(scope.row, scope.row.id)">分配权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 添加角色弹框 -->
        <el-dialog title="添加角色" :visible.sync="addRoleDialogflag">
            <el-form :model="addRoleList" ref="addRoleList">
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="addRoleList.roleName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="addRoleList.roleDesc" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addRoleDialogflag = false">取 消</el-button>
                <el-button type="primary" @click="addRoleFn">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 编辑角色弹框 -->
        <el-dialog title="编辑角色" :visible.sync="editRoleDialogflag">
            <el-form :model="editRoleList" ref="editRoleList">
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="editRoleList.roleName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="editRoleList.roleDesc" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editRoleDialogflag = false">取 消</el-button>
                <el-button type="primary" @click="editRoleFn">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 分配权限弹框 -->
        <el-dialog title="分配权限" :visible.sync="allotRoleDialogflag">
            <el-tree ref="tree" :data="rightList" show-checkbox node-key="id" default-expand-all
                :current-node-key="rightCheckStr" :default-checked-keys="rightCheckedList" :props="defaultProps">
            </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click="allotRoleDialogflag = false">取 消</el-button>
                <el-button type="primary" @click="allotQuanFn">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { GetRolePort, AddRolePort, DelRolePort, GetIdRolePort, EditRolePort } from '@/api/roles'
import { GetRightPort, SetRightPort, DelRightPort } from '@/api/rights'
export default {
    data() {
        return {
            roleList: [{}], //角色列表数据
            formLabelWidth: '120px',
            addRoleList: {
                roleName: '',
                roleDesc: ''
            },//添加角色
            addRoleDialogflag: false, //添加角色弹框
            editRoleDialogflag: false, //编辑角色弹框
            editRoleList: {}, //编辑信息
            editRoleId: '',
            rightList: [], //权限列表
            rightId: '',
            allotRoleDialogflag: false,
            rightCheckedList: [], //默认选中权限
            rightCheckStr: '', //当前选中的节点
            roleRightList: [],
            defaultProps: {
                children: 'children',
                label: 'authName'
            }
        };
    },
    computed: {
        ...mapGetters(['beacklist'])
    },
    created() {
        this.getRoleList()
    },
    methods: {
        async getRoleList() { //获取角色列表数据
            try {
                let res = await GetRolePort()
                // console.log('----', res);
                if (res.meta.status == 200) {
                    this.roleList = res.data
                }
            } catch {
                console.log('---获取角色列表数据');
            }
        },
        addRoleBtn() { //添加角色按钮
            this.addRoleDialogflag = true
            this.addRoleList.roleName = ''
            this.addRoleList.roleDesc = ''
        },
        async addRoleFn() { //添加角色
            try {
                let res = await AddRolePort(this.addRoleList)
                // console.log(res);
                if (res.meta.status == 201) {
                    this.addRoleDialogflag = false
                    this.$message.success(res.meta.msg)
                    this.getRoleList()
                } else {
                    this.addRoleDialogflag = false
                    this.$message.success(res.meta.msg)
                }
            } catch {
                console.log('---添加角色列表数据');
                this.addRoleDialogflag = false
            }
        },
        async delRoleBtn(id) { //删除角色按钮
            let res = await DelRolePort(id)
            // console.log('----', res);
            if (res.meta.status == 200) {
                this.$message.success(res.meta.msg)
            } else {
                this.$message.error(res.meta.msg)
            }
        },
        async editRoleBtn(id) { // 修改角色按钮 
            this.editRoleId = id
            let res = await GetIdRolePort(id)
            // console.log('----', res);
            if (res.meta.status == 200) {
                this.editRoleList = res.data
                this.editRoleDialogflag = true
                this.getRoleList()
            }
        },
        async editRoleFn() { // 修改角色方法
            let { roleName, roleDesc } = this.editRoleList

            let res = await EditRolePort(this.editRoleId, { roleName, roleDesc })
            // console.log(res);
            if (res.meta.status == 200) {
                this.$message.success('修改成功')
                this.editRoleDialogflag = false
                this.getRoleList()
            } else {
                this.$message.success(res.meta.msg)

            }
        },
        rightFn(a, arr) {
            if (!a.children) {
                return arr.push(a.id)
            } else {
                a.children.forEach(i => {
                    this.rightFn(i, arr)
                });
            }
        },
        async allotQuanBtn(row, id) { //分配权限按钮
            this.rightId = id
            let res = await GetRightPort('tree')
            // console.log(res);
            if (res.meta.status == 200) {
                this.rightList = res.data
                this.allotRoleDialogflag = true
            }
            this.rightCheckedList = []
            this.rightFn(row, this.rightCheckedList)
        },
        async allotQuanFn() {//分配权限方法
            let nn = this.$refs.tree.getCheckedKeys() //目前被选中的节点的 key
            let nnn = this.$refs.tree.getHalfCheckedKeys() //目前半选中的节点的 key
            let str = nn.concat(nnn).join(',')
            let res = await SetRightPort(this.rightId, str)
            // console.log(res);
            if (res.meta.status == 200) {
                this.allotRoleDialogflag = false
                this.$message.success(res.meta.msg)
                this.getRoleList()
            } else {
                this.allotRoleDialogflag = false
                this.$message.error(res.meta.msg)
                this.getRoleList()
            }
        },
        async closeFn(id, rid, data) { //删除单个权限
            console.log(data.children);
            let res = await DelRightPort(id,rid)
            if(res.meta.status == 200){
                this.$message.success(res.meta.msg)
                this.roleRightList = res.data
                data.children = res.data
                // this.getRoleList()
            }else{
                this.$message.error(res.meta.msg)
                this.getRoleList()
            }
        }


    },
    mounted() {

    },
    watch: {

    },
    components: {
    },
};
</script>

<style lang="scss" scoped>
.main {
    width: 100%;
    min-width: 1126px;
    height: 100%;
    background: #fff;
}

.el-table {
    margin: 15px 0;
}

.wrapper {
    width: 100%;
    border: 1px solid #999;
    display: flex;

    .box_left {
        width: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: 1px solid #999;
    }

    .box_right {
        width: 100%;
    }

    .box_right_item {
        display: flex;

    }

    .box_right_item_cont1 {
        border-right: 1px solid #999;
        border-bottom: 1px solid #999;
    }

    .box_right_item_cont2 {
        flex: 1;
        border-bottom: 1px solid #999;
        display: flex;
        flex-wrap: wrap;
    }

    .box_right_item_cont1 {
        width: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .el-tag {
        margin: 15px;
    }

    .bordernone {
        border-bottom: none !important;
    }
}
</style>
